<%--
  Created by IntelliJ IDEA.
  User: Tolean
  Date: 2018/5/14
  Time: 21:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>LYON</title>
    <%@include file="common/head.jspf"%>
    <link rel="Shortcut Icon" href="${lyon}/static/images/favicon.ico"  />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!--[if lte IE 8]><script src="${lyon}/static/assets/js/ie/html5shiv.js"></script><![endif]-->
    <link rel="stylesheet" href="${lyon}/static/assets/css/main.css" />
    <!--[if lte IE 9]><link rel="stylesheet" href="${lyon}/static/assets/css/ie9.css" /><![endif]-->
    <!--[if lte IE 8]><link rel="stylesheet" href="${lyon}/static/assets/css/ie8.css" /><![endif]-->
</head>
<body>

<!-- Wrapper -->
<div id="wrapper">

    <!-- Header -->
    <%@include file="common/header.jsp"%>
    <!-- Main -->
    <div id="main">
        <c:forEach items="${blogs}" var="i">
            <article class="post">
                <header>
                    <div class="title">
                        <h2><a href="${lyon}/onstage/single.html?id=${i.id}">${i.title}</a></h2>
                        <p>${i.sign}</p>
                    </div>
                    <div class="meta">
                        <time class="published" datetime="YYYY-MM-DD"><fmt:formatDate value="${i.releas_date}" type="date" dateStyle="full"/></time>
                        <a href="#" class="author"><span class="name">LYON</span><img src="${lyon}/static/images/avatar.jpg" alt="" /></a>
                    </div>
                </header>
                <c:if test="${img}">
                    <a href="${lyon}/onstage/single.html?id=${i.id}&type_id=${type_id}" class="image featured"><img src="${lyon}/static/images/blog/${i.id % 26}.jpg" /></a>
                </c:if>
                <p>${i.summary}</p>
                <footer>
                    <ul class="actions">
                        <li><a href="${lyon}/onstage/single.html?id=${i.id}&type_id=${type_id}" class="button big">阅读全文</a></li>
                    </ul>
                    <ul class="stats">
                        <li><a  class="icon fa-heart">${i.likenum}</a></li>
                        <li><a  class="icon fa-comment">${i.commentsnum}</a></li>
                    </ul>
                </footer>
            </article>
        </c:forEach>
        <!-- Pagination -->
        <ul class="actions pagination">
            <c:choose>
                <c:when test="${blogPageInfo.isHasPreviousPage()}">
                    <li><a href="${lyon}/onstage/home.html?pageNum=${blogPageInfo.getPrePage()}&type_id=${type_id}&keyword=${keyword}&img=${img}&down=${down}" class="button big previous">上一页</a></li>
                </c:when>
                <c:otherwise>
                    <li><a href="" class="disabled button big previous">上一页</a></li>
                </c:otherwise>
            </c:choose>
            <c:choose>
                <c:when test="${blogPageInfo.isHasNextPage()}">
                    <li><a href="${lyon}/onstage/home.html?pageNum=${blogPageInfo.getNextPage()}&type_id=${type_id}&keyword=${keyword}&img=${img}&down=${down}" class="button big next">下一页</a></li>
                </c:when>
                <c:otherwise>
                    <li><a href="#" class="disabled button big next">下一页</a></li>
                </c:otherwise>
            </c:choose>
        </ul>

    </div>

    <!-- Sidebar -->
    <section id="sidebar">

        <!-- Intro -->
        <section id="intro">
            <a href="#" class="logo"><img src="${lyon}/static/images/logo.jpg" alt="" /></a>
            <header>
                <h2>LYON 记录生活</h2>
                <p>In me the tiger sniffs the rose. 心有猛虎,细嗅蔷薇.</p>
            </header>
        </section>

        <!-- Mini Posts -->
        <section>
            <h2>推荐博客</h2>
            <div class="mini-posts">

                <!-- Mini Post -->

                <c:forEach items="${rank}" var="i">
                    <article class="mini-post">
                        <header>
                            <h3 style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis"><a href="${lyon}/onstage/single.html?id=${i.id}">${i.title}</a></h3>
                            <time class="published" datetime="YYYY-MM-DD"><fmt:formatDate value="${i.releas_date}" type="date" dateStyle="full"/></time>
                            <a href="#" class="author"><img src="${lyon}/static/images/avatar.jpg" alt="" /></a>
                        </header>
                        <c:if test="${img}">
                            <a href="${lyon}/onstage/single.html?id=${i.id}" class="image"><img src="${lyon}/static/images/blog/${i.id % 26}.jpg" alt="" /></a>
                        </c:if>
                    </article>
                </c:forEach>

            </div>
        </section>

        <!-- Posts List -->
        <section>
            <h2>博客分类</h2>
            <ul class="posts">
                <li>
                    <article>
                        <header>
                            <h3><a href="${lyon}/onstage/home.html">全部</a></h3>
                            <%--<time class="published" datetime="2015-10-20">October 20, 2015</time>--%>
                            <p>所有博客</p>
                        </header>
                        <c:if test="${img}">
                            <a href="${lyon}/onstage/home.html" class="image"><img src="${lyon}/static/images/blogType/2.jpg" alt="" /></a>
                        </c:if>
                    </article>
                </li>
                <c:forEach items="${blogTypes}" var="i">
                    <li>
                        <article>
                            <header>
                                <h3><a href="${lyon}/onstage/home.html?type_id=${i.id}">${i.type_name}</a></h3>
                                <p>${i.description}</p>
                            </header>
                            <c:if test="${img}">
                                <a href="${lyon}/onstage/home.html?type_id=${i.id}" class="image"><img src="${lyon}/static/images/blogType/${i.id %10}.jpg" alt="" /></a>
                            </c:if>
                        </article>
                    </li>
                </c:forEach>
            </ul>
        </section>

        <!-- About -->
        <section class="blurb">
            <h2>About Me</h2>
            <p>大家好,我是一名在读的大二学生,我搭建这个博客用于记录自己生活和学习. 大家也可以在博客上和我交流. 后面我也会慢慢的完善和添加功能</p>
            <ul class="actions">
                <li><a href="${blog}/onstage/aboutMe.html" class="button">更多内容</a></li>
            </ul>
        </section>

        <!-- Footer -->
        <section id="footer">
            <ul class="icons">
                <li><a href="#" class="fa-twitter"><span class="label">Twitter</span></a></li>
                <li><a href="#" class="fa-facebook"><span class="label">Facebook</span></a></li>
                <li><a href="#" class="fa-instagram"><span class="label">Instagram</span></a></li>
                <li><a href="#" class="fa-rss"><span class="label">RSS</span></a></li>
                <li><a href="#" class="fa-envelope"><span class="label">Email</span></a></li>
            </ul>
            <p class="copyright"> © 2015-2018<a href="http://lyonz.cn">lyonz.cn</a> .蜀ICP备18015765号-1</p>
        </section>

    </section>
    <div id="float_menu">
        <c:choose>
            <c:when test="${img}">
                <a href="${lyon}/onstage/home.html?pageNum=${blogPageInfo.getPageNum()}&type_id=${type_id}&keyword=${keyword}&img=false&down=${down}"><img src="${lyon}/static/images/imgMode.png" ></a>
            </c:when>
            <c:otherwise>
                <a href="${lyon}/onstage/home.html?pageNum=${blogPageInfo.getPageNum()}&type_id=${type_id}&keyword=${keyword}&img=true&down=${down}"><img src="${lyon}/static/images/noImgMode.png" ></a>
            </c:otherwise>
        </c:choose>

        <c:choose>
            <c:when test="${down}">
                <a href="${lyon}/onstage/home.html?pageNum=${blogPageInfo.getPageNum()}&type_id=${type_id}&keyword=${keyword}&img=${img}&down=false"><img src="${lyon}/static/images/down.png" ></a>
            </c:when>
            <c:otherwise>
                <a href="${lyon}/onstage/home.html?pageNum=${blogPageInfo.getPageNum()}&type_id=${type_id}&keyword=${keyword}&img=${img}&down=true"><img src="${lyon}/static/images/up.png" ></a>
            </c:otherwise>
        </c:choose>
    </div>
</div>
<!-- Scripts -->
<script src="${lyon}/static/assets/js/jquery.min.js"></script>
<script src="${lyon}/static/assets/js/skel.min.js"></script>
<script src="${lyon}/static/assets/js/util.js"></script>
<!--[if lte IE 8]><script src="${lyon}/static/assets/js/ie/respond.min.js"></script><![endif]-->
<script src="${lyon}/static/assets/js/main.js"></script>
</body>
</html>

